import PubSub from "./PubSub.js";
export default class MyStats extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: "open"})
        this.items = [];
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = `
            <div>学习清单：<span class="learning-count">0</span></div>
            <div>代办清单：<span class="todo-count">0</span></div>
            <style>
                :host { /* <my-stats> */
                    display: block;
                    border: var(--border-width) solid var(--text-color);
                    padding: 2rem;
                    border-radius: var(--border-radius);
                } 
                
                div {
                    font-size: 1.4rem;
                }
            </style>
        `
        this.learning_count = this.shadowRoot.querySelector(".learning-count");
        this.todo_count = this.shadowRoot.querySelector(".todo-count");
        PubSub.subscribe("learning_list_updated", this.update_learning_count.bind(this));
        PubSub.subscribe("todo_list_updated", this.update_todo_count.bind(this));
    }
    update_learning_count(list){
        this.learning_count.textContent = list.length;
    }
    update_todo_count(list){
        this.todo_count.textContent = list.length;
    }
}

customElements.define('my-stats', MyStats)
